<template>
  <div class="month-condition">
    <div class="mc-year">
      <el-select v-model="currYear" placeholder="请选择年度" size="small" @change="onYearChange">
        <el-option v-for="item in years" :key="item" :label="item + ' 年'" :value="item"></el-option>
      </el-select>
    </div>
    <div class="mc-month-view">
      <div
        v-for="item in months"
        :key="item.value"
        class="mc-month-item"
        :class="{
          actived: currMonth === item.value,
          disabled: item.disabled,
        }"
        @click="onMonthChange(item)">
        <slot :data="item"></slot>
        <span v-if="!$scopedSlots.default">
          {{ item.label }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dateConditions: {
      type: Array,
      /**
       *  [{
       *    year:'2022',
       *    months:[{
       *           label:'1月',
       *           value:'1',
       *           disabled:false
       *            }]
       * }]
       */
    },
    year: {
      // default year
      type: String,
    },
    month: {
      // default month
      type: String,
    },
  },
  data() {
    return {
      currYear: '',
      currMonth: '',
    }
  },
  computed: {
    years() {
      let years = []
      if (this.dateConditions && this.dateConditions.length) {
        years = this.dateConditions.map(item => item.year)
      }
      return years
    },
    months() {
      let months = []
      if (this.currYear && this.years.length) {
        const yearItem = this.dateConditions.find(item => {
          return item.year === this.currYear
        })
        if (yearItem) {
          months = yearItem.months || []
        }
      }
      return months
    },
  },
  watch: {
    year(val) {
      this.currYear = val
    },
    month(val) {
      this.currMonth = val
    },
    years(val) {
      // 设置默认值
      if (val.length && !this.year) {
        this.currYear = val[0]
        this.onYearChange(this.currYear)
      }
    },
    months(val) {
      // 设置默认值
      if (val.length && !this.month) {
        this.onMonthChange(val[0])
      }
    },
  },
  mounted() {},
  methods: {
    onMonthChange(item) {
      if (!item.disabled && item.value !== this.currMonth) {
        this.currMonth = item.value
        this.$emit('month-change', item.value)
        this.$emit('update:month', item.value)
      }
    },
    onYearChange() {
      this.$emit('year-change', this.currYear)
      this.$emit('update:year', this.currYear)
    },
  },
}
</script>

<style lang="scss" scoped>
.month-condition {
  display: flex;
  align-items: center;
  .mc-year {
    width: 120px;
  }
  .mc-month-view {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 5px 20px;
    overflow: hidden;
    .mc-month-item {
      color: #333;
      font-size: 16px;
      cursor: pointer;
      width: 55px;
      &:not(:last-child) {
        margin-right: 10px;
      }
      &:hover {
        color: #c1a370;
      }
      &.disabled {
        // cursor: not-allowed;
        pointer-events: none;
        color: #aaa;
      }
      &.actived {
        color: #d4b175;
        font-weight: bold;
      }
    }
  }
}
</style>
